﻿let ctx: CanvasRenderingContext2D;

declare let startDrag;
window.onload = () => {

    //let div1 = document.createElement("div") as HTMLDivElement;
    //div1.style.height = "50px";
    //div1.style.width = "50px";
    //div1.style.position = "absolute";
    //div1.style.backgroundColor = "rgb(0,0,0)"
    //div1.style.top = "0px";
    //div1.style.left = "0px";
    //document.body.appendChild(div1);

    //startDrag(document.body, div1);


    //let svg: SVGSVGElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    //svg.style.position = "absoulte";
    //svg.setAttribute("width", "450");
    //svg.setAttribute("height", "400");
    //document.body.appendChild(svg);
    //{
    //    let path: SVGPathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
    //    path.setAttribute("stroke", "blue");
    //    path.setAttribute("stroke-width", "5");
    //    path.setAttribute("fill", "none");
    //    path.setAttribute("d", "M 100 350 c 0 -200 300 -150 300 -350");
    //    svg.appendChild(path);
    //}


    //let can = document.getElementById("myCanvas") as HTMLCanvasElement;
    //can.width = 1000;
    //can.height = 1000;
    //ctx = can.getContext("2d");

    //let div1 = new kdiv();
    //let div2 = new kdiv();
    //let onDow = () => {
    //    daow(div1.l, div1.t, div2.l, div2.t);
    //}
    //div1.onLink = onDow;
    //div2.onLink = onDow;
};

function daow(x1, y1, x2, y2) {
    ctx.clearRect(0, 0, 1000, 1000);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.bezierCurveTo(x1 + 200, y1, x2 - 100, y2, x2, y2);
    ctx.stroke();
}

//class kdiv {
//    isOnEvent = false;
//    div1: HTMLDivElement;
//    x: number = 0;
//    y: number = 0;
//    l: number = 0;
//    t: number = 0;

//    onLink;

//    onmouseup_;
//    onmousemove_;

//    constructor() {
//        let div1 = document.createElement("div") as HTMLDivElement;
//        div1.style.height = "50px";
//        div1.style.width = "50px";
//        div1.style.position = "absolute";
//        div1.style.backgroundColor = "rgb(0,0,0)"
//        div1.style.top = "0px";
//        div1.style.left = "0px";
//        document.body.appendChild(div1);
//        div1.onmousedown = this.onmousedown.bind(this);
//        this.div1 = div1;
//        this.onmousemove_ = this.onmousemove.bind(this);
//        this.onmouseup_ = this.onmouseup.bind(this);
//    }

//    onmousedown(e: MouseEvent) {
//        console.log(e);
//        this.x = e.x - this.l;
//        this.y = e.y - this.t;
//        if (e.preventDefault) {
//            e.preventDefault();
//        } else {
//            e.returnValue = false;

//        }

//        console.log("点击");
//        document.addEventListener("mousemove", this.onmousemove_);
//        document.addEventListener("mouseup", this.onmouseup_);
//    }
//    onmousemove(e: MouseEvent) {
//        if (e.preventDefault) {
//            e.preventDefault();
        
//        } else {
//            e.returnValue = false;
     
//        }
//        this.div1.style.top = (this.t = e.y - this.y) + "px";
//        this.div1.style.left = (this.l = e.x - this.x) + "px";
//        this.onLink();
//        console.log("移动");
//    }


 
//    onmouseup(e: MouseEvent) {
//        console.log("释放onmouseup");
//        document.removeEventListener("mousemove", this.onmousemove_);
//        document.removeEventListener("mouseup", this.onmouseup_);
//    }
//}
